<template>
	<!-- 我的课程 -->
	<view class="course">
		<view class="status_bar" :style="{ height: barHeight + 'px' }">
			<!-- 这里是状态栏 -->
		</view>
		<view class="header">
			<uni-easyinput prefixIcon="search" v-model="params.searchValue" placeholder="搜索课程" @iconClick="clicksearch"></uni-easyinput>
		</view>
		<view class="type-box">
			<view class="type-list">
				<view class="">
					<p style="width: 50px">方向：</p>
				</view>
				<scroll-view :scroll-x="true" class="typelist-scroll">
					<view
						:class="['type-item', +pIndex === item.rid ? 'type-item-active' : '']"
						v-for="(item, index) in categoryAryList"
						:key="index"
						@click="handleCategory(item)"
					>
						<p>{{ item.name }}</p>
					</view>
				</scroll-view>
			</view>
			<view class="type-list">
				<view class="">
					<p style="width: 50px">分类：</p>
				</view>
				<scroll-view :scroll-x="true" class="typelist-scroll">
					<view
						:class="['type-item', +cIndex === c.rid ? 'type-item-active' : '']"
						v-for="(c, i) in categoryItemInfo.categoryList"
						:key="i"
						@click="handleCategoryItem(c)"
					>
						<p>{{ c.name }}</p>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="course-box">
			<z-paging ref="paging" v-model="videos" @query="queryList" :default-page-size="20">
				<view class="" v-for="(item, i) in videos" :key="i">
					<MdItemClassComponent :classInfo="item" />
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
import { getCategoryList, getVideoListByCategoryId } from '@/services/course.js';
import LiveItemClassComponent from '@/components/liveItem/index.vue';
import MdItemClassComponent from '@/components/mdItem/index.vue';
export default {
	components: {
		LiveItemClassComponent,
		MdItemClassComponent
	},
	data() {
		return {
			searchvalue: '',
			params: {
				categoryId: '',
				searchValue: '',
				pageNum: 1,
				pageSize: 20
			},
			categoryAryList: [],
			categoryItemInfo: {},
			pIndex: null,
			cIndex: -1,
			videos: [],
			total: 0,
			routeQuery: {},
			barHeight: 25
		};
	},
	onShow() {
		this.getCategoryList();
		const type = uni.getStorageSync('type');
		if (type) {
			this.routeQuery = JSON.parse(type);
			this.$refs.paging.reload();
		}
	},
	onLoad() {
		//使用h5plus接口获取状态栏高度
		this.barHeight = plus.navigator.getStatusbarHeight();
	},

	methods: {
		clicksearch() {
			this.getVideoListByCategoryId(1);
		},
		handleCategory(item) {
			this.categoryItemInfo = item;
			this.pIndex = item.rid;
			this.params.categoryId = item.rid;
			this.cIndex = -1;
			this.$refs.paging.reload();
			this.getVideoListByCategoryId(1);
		},

		async getCategoryList() {
			const res = await getCategoryList(1);
			if (res.code === 200) {
				this.categoryAryList = res.data;
				this.disposeData();
			}
		},
		disposeData() {
			this.categoryAryList.forEach((item) => {
				item.categoryList.unshift({
					rid: -1,
					name: '不限'
				});
			});
			this.params.searchValue = this.routeQuery.searchValue ? this.routeQuery.searchValue : '';
			this.pIndex = this.routeQuery.pId ? this.routeQuery.pId : this.categoryAryList[0].rid;
			// 存在父级id就找到对应的子级，然后高亮子级
			if (this.routeQuery.pId) {
				console.log(this.routeQuery.pId, 'this.routeQuery.pId');
				const cur = this.categoryAryList.filter((item) => {
					return item.rid == this.routeQuery.pId;
				});

				console.log(this.categoryAryList, cur, 'cur');
				this.categoryItemInfo = cur[0];
				this.params.categoryId = this.routeQuery.pId;
			} else {
				this.categoryItemInfo = this.categoryAryList[0];
				this.params.categoryId = this.categoryItemInfo.rid;
			}
			this.cIndex = this.routeQuery.cId ? this.routeQuery.cId : -1;
			console.log(this.params, 'params');
			this.getVideoListByCategoryId(1);
		},
		// 根据分类id获取课程详情
		async getVideoListByCategoryId(pNo) {
			this.params.pageNum = pNo;
			const res = await getVideoListByCategoryId(this.params);
			if (res.code === 200) {
				this.videos = res.rows;
				this.total = res.total || 0;
				this.$refs.paging.completeByTotal(res.rows, res.total);
			}
		},
		queryList(pageNo, pageSize) {
			if (this.videos.length < this.total) {
				this.getVideoListByCategoryId(pageNo);
			}
		},
		handleCategoryItem(item) {
			this.cIndex = item.rid;
			if (this.cIndex === -1) {
				this.params.categoryId = this.categoryItemInfo.rid;
			} else {
				this.params.categoryId = item.rid;
			}
			this.$refs.paging.reload();
			this.getVideoListByCategoryId(1);
		},
		handleCurrentChange(val) {
			this.params.pageNum = val;
			this.getVideoListByCategoryId(val);
		}
	}
};
</script>

<style lang="scss" scoped>
.md-class-con {
	margin-top: 40rpx;
	padding: 24rpx;
	border-radius: 24rpx;
	.md-class-list {
		padding: 24rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start li {
			list-style: none;
			// margin-left: 30px;
		}
	}
}
.type-item {
	color: #1c1f21;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	border-radius: 6px;
	cursor: pointer;
	margin-left: 10px;
	p {
		width: 75px;
		height: 27px;
		background-color: #e6e6e6;
		line-height: 27px;
		border-radius: 15px;
		padding: 0 5px;
	}
}
.typelist-scroll {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	height: 30px;
}
.type-list {
	height: 50px;
	line-height: 50px;
	display: flex;
	align-items: center;
}
.type-item-active {
	position: relative;
	font-size: 12px;
	color: #0fb09b;

	&::after {
		//主要是这个
		content: '';
		width: 30px;
		height: 5px;
		display: block;
		margin: 0 auto;
		margin-top: 5px;
		background-color: #0fb09b;
		border-radius: 30px;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
.type-box {
	margin-top: 24rpx;
}
.course {
	background-color: #f2f3f7;
	padding: 0px 32rpx;
	// height: 100vh;
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	.course-box {
		display: flex;
		flex-wrap: wrap;
		height: calc(100vh - 430rpx);
	}
	::v-deep {
		.z-paging-content {
			top: 340rpx !important;
			background-color: #f2f3f7;
		}
		.zp-paging-container-content {
			display: flex;
			padding: 0px 37px;
			background-color: #f2f3f7;
			flex-wrap: wrap;
		}
		.uni-easyinput {
			height: 72rpx;
		}
		.is-input-border {
			border-radius: 40rpx;
		}
		.is-focused {
			border-color: rgb(229, 229, 229) !important;
		}

		.swiper-box {
			margin-top: 24rpx;
			border-radius: 8rpx;
			height: 120px;
		}
		.uni-swiper-item {
			height: 240rpx;
		}
		.uni-scroll-view-content {
			display: flex;
			align-items: center;
		}
	}
}
</style>
